<template>
  <main class="wss-container">
    <div class="label-box-content">
      <!-- <NewCard
        :border="false"
        :style="{ 'margin-bottom': padding }"
        title="咨询方式"
      >
      </NewCard> -->

      <div class="content-box">
        <NewCard :isright="true" title="内容" class="table">
          <template #right>
            <el-button @click="add" size="mini" type="primary">新增</el-button>
          </template>
          <div>
            <ComTable
              @EventRowClick="RowClickFn"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              :pagination="{
                total: pageing.total,
                pageNum: pageing.pageNum,
                pageSize: pageing.pageSize,
              }"
              :list="tableList"
              :modes="tableModes"
            >
            </ComTable>
          </div>
        </NewCard>
        <NewCard :isright="true" :title="rightTitle" class="edit-box">
          <template #right>
            <div>
              <el-button size="mini" @click="reset">重设</el-button>
              <el-button
                size="mini"
                :disabled="editForm.type == '' && !isAdd ? true : false"
                type="primary"
                @click="comfirmEdit"
                >确 定</el-button
              >
            </div>
          </template>
          <div>
            <el-form
              ref="form"
              label-position="left"
              :model="editForm"
              :rules="rules"
            >
              <el-form-item
                label="咨询方式"
                :label-width="formLabelWidth"
                prop="type"
              >
                <el-input v-model="editForm.type"></el-input>
              </el-form-item>
              <el-form-item
                label="描述"
                :label-width="formLabelWidth"
                prop="description"
              >
                <el-input
                  v-model.number="editForm.description"
                  autocomplete="off"
                  placeholder="请输入常数价格"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="回答人数上限"
                :label-width="formLabelWidth"
                prop="maxReply"
              >
                <el-input
                  v-model="editForm.maxReply"
                  autocomplete="off"
                  placeholder="请输入回答人数上限"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="回答人数下限"
                :label-width="formLabelWidth"
                prop="minReply"
              >
                <el-input
                  v-model="editForm.minReply"
                  autocomplete="off"
                  placeholder="请输入回答人数下限"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </NewCard>
      </div>

      <!-- 修改内容定价 end-->
    </div>
  </main>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";

import {
  getPriceCommissionListApi,
  getPriceCommissionEditApi,
} from "@/wss/newApi_3-24/financial/priceCommission.js";
import ComTable from "../../../components/comTable.vue";

import NewCard from "../../../components/newCard.vue";
import { changeType, getfilterParams } from "@/wss/utils/wss.js";
import {
  getConsultModeApi,
  getConsultEditApi,
  getConsultAddApi,
} from "@/wss/newApi_3-24/work/consultMode.js";
export default {
  components: {
    ComTable,

    NewCard,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") return callback(new Error("年龄不能为空"));
      value = Number(value);

      if (typeof value == "number") {
        if (value <= 1 && value >= 0) return callback();
      }
      callback(new Error("年龄不能为空"));
    };
    return {
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "1",
            label: "正常",
          },
          {
            value: "2",
            label: "失败",
          },
        ],
      },
      // 右侧的新增或者编辑
      rightTitle: "编辑",
      padding: padding,
      // 标记第一次过滤
      isFirst: true,
      // 查看对话框
      lookDialogVisible: false,
      isFailtrueFilter: false, //是否过滤失败筛选

      // 类型数组
      typeArr: [],
      dialogVisible: false,

      // 分页参数
      pageing: { pageNum: 1, pageSize: 5, total: 0 },
      // 失败和成功状态
      currentStatus: "1",

      // 表单配置
      comForm: {
        modes: [
          {
            formType: "select",
            mode: "type",
            label: "类型",
            value: "",
            select: [],
          },
        ],
      },
      isAdd: false,
      // 表格数据
      tableList: [],
      // 表格配置
      tableModes: [
        {
          label: "咨询方式",
          mode: "type",
        },
        {
          label: "描述",
          mode: "description",
          width: 100,

          showOverflowTooltip: true,
        },
        {
          label: "最少回复人数",
          mode: "minReply",
          showOverflowTooltip: true,
          width: 200,
          effectiveStatus: true,
        },
        {
          label: "最多回复人数",
          mode: "maxReply",
          showOverflowTooltip: true,
          width: 200,
          effectiveStatus: true,
        },
        {
          label: "状态",
          mode: "status",
          showOverflowTooltip: true,
          isSwitchDisabled: true,
        },
      ],
      // 修改定价参数
      editForm: {
        type: "",
        description: "",
        minReply: "",
        maxReply: "",
      },
      //修改内容定价表单判断
      rules: {
        type: [
          {
            required: true,
            message: "请选择定价类型",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        maxReply: [
          {
            required: true,
            trigger: "blur",
            message: "请输入人数上线",
          },
        ],
        minReply: [
          {
            required: true,
            trigger: "blur",

            message: "请输入人数上线",
          },
        ],
      },
      //修改内容定价 提示框显示状态
      dialogFormVisible: false,

      //修改内容定价 标题宽度
      formLabelWidth: "120px",
    };
  },
  created() {
    this.consultWayFn();
  },

  methods: {
    async consultWayFn() {
      let { code, rows, total } = await getConsultModeApi(this.pageing);
      if (code != 200) return;
      this.tableList = JSON.parse(JSON.stringify(rows));
      this.pageing.total = total;
    },
    // 新增
    async add() {
      this.rightTitle = "新增";
      this.isAdd = true;
      this.editForm = {
        type: "",
        description: "",
        minReply: "",
        maxReply: "",
      };
    },

    // 重设
    reset() {
      this.editForm = {
        type: "",
        description: "",
        minReply: "",
        maxReply: "",
      };
      this.$refs.form.clearValidate();
      this.pageing = { pageNum: 1, pageSize: 10, total: 0 };
    },
    // 修改定价确认
    async comfirmEdit() {
      await this.$refs.form.validate();
      let editForm = this.editForm;
      // await this.$refs.form.validate();
      let result = null;
      if (this.editForm.id) {
        result = await getConsultEditApi(editForm);
      } else {
        result = await getConsultAddApi(editForm);
      }

      if (result.code != 200) return;

      this.consultWayFn();
      this.editForm = {};
      this.isAdd = false;
      this.$message({
        message: result.msg,
        type: "success",
      });
    },
    // 表格行被点击了
    RowClickFn(row) {
      this.isAdd = false;
      // 1法律 3头条 4问答 6超级合同 7咨询
      let changeRow = JSON.parse(JSON.stringify(row));

      // console.log(changeRow.type);
      // if (changeRow.type == 1) {
      //   changeRow.type = "法律";
      // } else if (changeRow.type == 3) {
      //   changeRow.type = "头条";
      // } else if (changeRow.type == 4) {
      //   changeRow.type = "问答";
      // } else if (changeRow.type == 6) {
      //   changeRow.type = "超级合同";
      // } else {
      //   changeRow.type = "咨询";
      // }

      this.editForm = changeRow;
      console.log(this.editForm);
    },
    // 编辑
    edit() {
      this.dialogFormVisible = true;
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      console.log(pageNum,"123")
      this.pageing.pageNum = pageNum;
      this.consultWayFn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      console.log(pageSize,"456")

      this.pageing.pageSize = pageSize;
      this.consultWayFn();
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    inquireFn(paramsArr) {
      console.log(paramsArr);
      let { pageing } = this;
      // 筛选数据
      paramsArr.forEach((item) => {
        for (const key in item) {
          this.pageing[key] = item[key];
        }
      });
      if (pageing.type == "" || !pageing.type) {
        pageing.type = "1,3,4,6";
      }
      pageing.pageNum = 1;
      this.getPriceCommissionList();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  ::v-deep .el-card {
    border-radius: 0;
    border: 0;
  }
  ::v-deep .el-tabs__nav-scroll {
    overflow: hidden;
    background: #ffffff;

    box-sizing: border-box;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
  }
  ::v-deep .el-tabs__item.is-active,
  ::v-deep .el-tabs__item:hover {
    color: #f97f2a;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}
.content-box {
  display: flex;
  .table {
    flex: 1.5;
    margin-right: 30px;
  }
  .edit-box {
    flex: 0.5;
  }
}
</style>